<template>
    <div class="home_wrap">

        <el-container>

            <Menu></Menu>

            <el-container>
                <el-main>
                    <el-breadcrumb separator="/">
<!--                        <el-breadcrumb-item :to="{ path: '/' }">整体工艺流程</el-breadcrumb-item>-->
                        <el-breadcrumb-item
                                v-for="(item,index) in breadList"
                                :key="index"
                                :to="{ path: item.path }"
                        >{{item.meta.title}}
                        </el-breadcrumb-item>
                    </el-breadcrumb>

                    <div class="content_wrap">
                        <vue-scroll :ops="$root.scrollOpsY">
                            <router-view></router-view>
                        </vue-scroll>
                    </div>

                </el-main>
            </el-container>

        </el-container>

    </div>
</template>

<script>
    import Menu from '../components/Menu';

    export default {
        components: {
            Menu,
        },
        watch: { //路由改变的时候监听
            $route() {
                this.getBreadcrumb();
            }
        },
        data() {
            return {
                breadList: [], // 路由集合
            }
        },
        methods: {
            isHome(route) { //拿到首页
                return route.name === "home";
            },

            getBreadcrumb() {
                let matched = this.$route.matched; //拿到显示的路由路径
                // if(!this.isHome(matched[0])){//当前路由等于首页
                //     matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
                // }

                matched = matched.slice(1);

                this.breadList = matched;
            },
        },
        created(){
            this.getBreadcrumb();
        },
    }
</script>

<style lang="less">
    .home_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        > .el-container {
            width: 100%;
            height: 100%;

            > .el-container {

                > .el-main {
                    padding: 0;
                    background-color: #F2F3F7;
                    overflow: hidden;

                    > .el-breadcrumb {
                        height: 64px;
                        line-height: 64px;
                        background-color: #FFFFFF;
                        padding: 0 28px;
                        box-sizing: border-box;

                        > .el-breadcrumb__item {

                            .el-breadcrumb__inner {
                                font-size: 16px;
                                color: #9A9FAF;
                                font-weight: 600;
                            }

                            .el-breadcrumb__separator {
                                font-size: 16px;
                                color: #9A9FAF;
                                margin:  0 4px 0 0;
                            }

                            &:last-child {

                                .el-breadcrumb__inner {
                                    color: #2050D5;
                                }
                            }
                        }
                    }

                    > .content_wrap {
                        width: 100%;
                        height: calc(100% - 64px);


                        > .__vuescroll {


                            > .__panel {

                                > .__view {
                                    padding: 28px;
                                    box-sizing: border-box;

                                    > div {
                                        width: calc(100% - 28px - 28px);
                                        height: calc(100% - 28px - 28px);
                                        position: absolute;
                                        top: 28px;
                                        left: 28px;
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
    }
</style>
